iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
2
Modern Web

前端工程的另一個選擇 Svelte 系列 第 1

DAY01-輕薄快速上手的新體驗

  • 分享至 

  • xImage
  •  

svelte 前端工程師的另一個選擇

相信大家對於主流的前端框架angular、react、vue不陌生,但是提到 svelte 可能知道的人就沒那麼多了,筆者希望藉由第十一屆鐵人賽能讓大家對於 svelte 能夠有初步的認識。

本文同步放置於此

svelte 初體驗

相信大家看到下面的程式碼應該不陌生

<script>
const name = "kirai";
</script>
<style>
</style>
<p>Hello World {name}</p>

大家會說這不過是基本的html程式碼,不過這不是html的程式碼,這個是 svelte 的代碼,大家有沒有想過就是這大家認為再簡單不過的語法可以構成一個 spa 網站,甚至於可以立即響應狀態的變更而不需透過控制virtaul DOM。

今天要介紹給大家的 svelte 就是把大家熟悉不過的 html 和 javascript 的語法,透過編譯器編譯成 javascript 語言,因此只要在 index.html 上使用這編譯後的 javascript 就可以了,也不需要相依其他目前主流的前端框架就完成一個SPA的前端網頁程式。

接下來的30天筆者會帶給大家下列內容:

  • svelte 的安裝以及專案的設定
  • svelte 基本語法
  • svelte 迴圈以及邏輯判斷
  • svelte $的用法以及含意
  • svelte 的生命週期
  • 進階的內容
  • routing的設定
  • ie 相容的做法

小結

希望今天的簡介可以讓大家深深感受到 svelte 的威力,想想看只要會 html 跟 javascript 而不需要前端框架的知識就可以做成一個純 javascript 的 spa 網站,在往後的 30 天筆者將會一步一步將 svelte 介紹給大家。


下一篇
DAY02-前置作業
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言